<template>
  <div class="app-container">
    <div>
      <el-form ref="form" :model="queryParams" label-width="80px" inline>
        <el-form-item label="是否锁定" prop="accountLocked">
          <FormSelect size="small" clearable v-model="queryParams.accountLocked"/>
        </el-form-item>
        <el-form-item label="到期时间" prop="expireTime">
          <el-date-picker
            size="small"
            v-model="queryParams.expireTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="名称" prop="nickname">
          <el-input v-model="queryParams.nickname" size="small"/>
        </el-form-item>

        <el-form-item label="电话" prop="phone">
          <el-input v-model="queryParams.phone" size="small"/>
        </el-form-item>

        <el-form-item label="帐号" prop="username">
          <el-input v-model="queryParams.username" size="small"/>
        </el-form-item>
        <el-form-item label="部门" prop="deptId" inline>
          <TreeSelect v-model="queryParams.deptId" :data-source="listDept" class-name="treeselect-main"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addFormVisible = true" v-permission="['sys-setting-user:add']" size="small">添加</el-button>
          <el-button type="primary" @click="getList" size="small">查询</el-button>
          <el-button type="primary" @click="resetForm('form')" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-table v-loading="tableLoading"
                :data="tableData"
                height="600"
                border
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="帐号" prop="username"></el-table-column>
        <el-table-column label="名称" prop="nickname"></el-table-column>
        <el-table-column label="电话" prop="phone"></el-table-column>

        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="修改时间" prop="updateTime"></el-table-column>
        <el-table-column label="是否锁定" prop="accountLocked"></el-table-column>
        <el-table-column label="头像">
          <template slot-scope="scope">
            <div class="block">
              <el-avatar :size="50" :src="scope.row.avatar"></el-avatar>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="是否启用" prop="enable"></el-table-column>
        <el-table-column label="帐号到期时间" prop="expireTime"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="部门ID" prop="deptId"></el-table-column>

        <el-table-column label="操作" fixed="right" width="100">

          <template slot-scope="scope">
            <el-button size="small" type="text" @click="()=>{viewVisible=true;viewData = scope.row}">查看</el-button>
            <el-button size="small" type="text" @click="setEditData(scope.row)">编辑</el-button>
            <br>
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="red"
              @confirm="remove(scope.row)"
              title="确定删除吗？"
            >
              <el-button size="small" type="text" slot="reference">删除</el-button>
            </el-popconfirm>
            <el-dropdown>
              <el-button type="text">更多</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="()=>{roleGroupVisible = true;editGroupRoleData.uid = scope.row.id}">角色用户组</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        background
        :page-sizes="pageWrapper.pageSizes"
        :total="pageWrapper.total"
        :limit.sync="pageWrapper.size"
        :page.sync="pageWrapper.current"
        auto-scroll
        @pagination="getList"
        layout="sizes,prev, pager, next"
      />
    </div>

    <!-- form  -->
    <el-dialog title="添加" width="35%" :visible.sync="addFormVisible"
               @close="()=>{this.resetForm('addForm')}"
    >
      <el-form ref="addForm" label-width="80" :rules="addRules" :model="addFormData">
        <el-form-item label="帐号" prop="username">
          <el-input v-model="addFormData.username" size="small"/>
        </el-form-item>
        <el-form-item label="名称" prop="nickname">
          <el-input v-model="addFormData.nickname" size="small"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addFormData.password" type="password" size="small"/>
        </el-form-item>
        <el-form-item label="用户组" prop="groups">
          <TreeSelect v-model="addFormData.groups" multiple :data-source="allGroup"/>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <TreeSelect v-model="addFormData.deptId" :data-source="listDept"/>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="addFormData.phone" size="small"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addFormData.email" size="small"/>
        </el-form-item>
        <el-form-item label="是否启用" prop="enable">
          <FormSelect v-model="addFormData.enable"/>
        </el-form-item>
        <el-form-item label="帐号到期时间" prop="expireTime">
          <el-date-picker
            v-model="addFormData.expireTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addFormData.remark" type="textarea" size="small"/>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="resetForm('addForm')">重 置</el-button>
        <el-button type="primary" @click="createTUser('addForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改"  width="35%" :visible.sync="editFormVisible"
               @close="()=>{this.resetForm('editForm')}"
    >
      <el-form ref="editForm" label-width="80" :rules="editRules" :model="editFormData">
        <el-form-item label="名称" prop="nickname">
          <el-input v-model="editFormData.nickname" size="small"/>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <TreeSelect v-model="editFormData.deptId" :data-source="listDept"/>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="editFormData.phone" size="small"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editFormData.email" size="small"/>
        </el-form-item>
        <el-form-item label="是否锁定" prop="accountLocked">
          <FormSelect v-model="editFormData.accountLocked"/>
        </el-form-item>
        <el-form-item label="是否启用" prop="enable">
          <FormSelect v-model="editFormData.enable"/>
        </el-form-item>
        <el-form-item label="帐号到期时间" prop="expireTime">
          <el-date-picker
            v-model="editFormData.expireTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="editFormData.remark" size="small"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateTUser('editForm')">确 定</el-button>
      </div>
    </el-dialog>


    <!--view-->
    <el-dialog :visible.sync="viewVisible" footer="" >
      <el-descriptions border title="查看">
        <el-descriptions-item label="用户ID">{{ viewData.id }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ viewData.createTime }}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{ viewData.updateTime }}</el-descriptions-item>
        <el-descriptions-item label="是否锁定">{{ viewData.accountLocked==1?'是':'否' }}</el-descriptions-item>
        <el-descriptions-item label="头像">{{ viewData.avatar }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ viewData.email}}</el-descriptions-item>
        <el-descriptions-item label="是否启用">{{ viewData.enable==1?'是':'否' }}</el-descriptions-item>
        <el-descriptions-item label="帐号到期时间">{{ viewData.expireTime }}</el-descriptions-item>
        <el-descriptions-item label="名称">{{ viewData.nickname }}</el-descriptions-item>
        <el-descriptions-item label="电话">{{ viewData.phone }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ viewData.remark }}</el-descriptions-item>
        <el-descriptions-item label="帐号">{{ viewData.username }}</el-descriptions-item>
        <el-descriptions-item label="部门ID">{{ viewData.deptId }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog width="35%" title="角色用户组" :visible.sync="roleGroupVisible" @open="loadUserGroupsAndRoles">
      <el-alert
        title="提示"
        description="用户权限由单独分配的角色和用户组具有的角色共同组成"
        type="info"
        :closable="false"
        show-icon
        effect="dark"/>
        <el-form ref="userGroupForm" :model="editGroupRoleData">
          <el-form-item label="用户组">
            <TreeSelect v-model="editGroupRoleData.groups" multiple :data-source="allGroup"/>
          </el-form-item>
          <el-form-item label="角色">
            <CheckBoxGroup v-model="editGroupRoleData.roles" multiple :async-fun="allRole" :config="{labelKey:'name',valueKey:'id'}"/>
          </el-form-item>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateUserGroupRole('userGroupForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { pageData, create, update, removeById ,updateUserGroupRole,loadUserGroupsAndRoles } from '@/api/system/tUser'
import { pageMixin, formMixin } from '@/mixins/mixins'
import FormSelect from '@/components/FormComponent/FormSelect'
import TreeSelect from '@/components/TreeSelect'
import { listDept } from '@/api/system/tDept'
import {allGroup} from '@/api/system/tGroup'
import {allRole} from '@/api/system/tRole'
import CheckBoxGroup from '@/components/FormComponent/CheckBoxGroup'


export default {
  name: 'TUser',
  mixins: [pageMixin, formMixin],
  components: { CheckBoxGroup, FormSelect, Pagination, TreeSelect },
  data() {
    return {
      tableLoading: false,
      tableData: [],
      queryParams: {
        createTime: '',
        accountLocked: '',
        expireTime: '',
        nickname: '',
        phone: '',
        username: '',
        deptId: ''
      },
      addFormVisible: false,
      editFormVisible: false,
      viewVisible: false,
      viewData: {
        id: '',
        createTime: '',
        updateTime: '',
        accountLocked: '',
        avatar: '',
        email: '',
        enable: '',
        expireTime: '',
        nickname: '',
        phone: '',
        remark: '',
        username: '',
        deptId: ''
      },
      addFormData: {
        accountLocked: '',
        email: '',
        enable: 0,
        expireTime: '',
        nickname: '',
        phone: '',
        password:'',
        groups:[],
        remark: '',
        username: '',
        deptId: ''
      },
      editFormData: {
        id: '',
        accountLocked: '',
        email: '',
        enable: '',
        expireTime: '',
        nickname: '',
        phone: '',
        remark: '',
        deptId: ''
      },
      addRules: {
        enable: [{ required: true }],
        nickname: [{ required: true }],
        password: [{ required: true }],
        phone: [{ required: true }],
        username: [{ required: true }],
        deptId: [{ required: true }]
      },
      editRules: {
        accountLocked: [{ required: true }],
        enable: [{ required: true }],
        nickname: [{ required: true }],
        phone: [{ required: true }],
        deptId: [{ required: true }]
      },
      roleGroupVisible:false,
      editGroupRoleData:{
        uid:'',
        roles:[],
        groups:[]
      },
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    listDept,
    allGroup,
    allRole,
    getList() {
      this.tableLoading = true
      pageData({ current: this.pageWrapper.current, size: this.pageWrapper.size, ...this.queryParams }).then(res => {
        this.setPageWrapper(res.data)
        this.tableData = res.data.records
        this.tableLoading = false
      })
    },
    setEditData(row) {
      Object.keys(this.editFormData).forEach(key => {
        this.editFormData[key] = row[key]
      })
      this.editFormVisible = true
    },
    updateTUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          update(this.editFormData).then(res => {
            this.$notify['success']({
              title: res.message
            })
            this.getList()
            this.editFormVisible = false
          })
        }
      })

    },
    createTUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          create(this.addFormData).then(res => {
            this.$notify['success']({
              title: res.message
            })
            this.getList()
            this.addFormVisible = false
          })
        }
      })

    },
    remove(row) {
      removeById(row.dictId).then(res => {
        this.$notify['success']({
          title: res.message
        })
        this.getList()
      })
    },
    loadUserGroupsAndRoles(){
      loadUserGroupsAndRoles(this.editGroupRoleData.uid).then(res =>{
        this.editGroupRoleData.roles = res.data.roles;
        this.editGroupRoleData.groups = res.data.groups;
      })
    },
    updateUserGroupRole(refName){
      updateUserGroupRole({...this.editGroupRoleData})
      .then(res =>{
        this.$notify['success']({
          title:res.message,
        })
        this.roleGroupVisible = false;
      })
    }

  }
}
</script>

<style scoped >

.treeselect-main {
  width: 204px;
  line-height: 30px;

.vue-treeselect__placeholder {
  line-height: 30px;
}

.vue-treeselect__control {
  height: 30px;
}

}


</style>
